<template>
  <div id="details">
    <header>
      <div class="left" @click="gb">
        <i>&lt;</i>
        <span>返回</span>
      </div>

      <h1>{{goodinfo.title}}</h1>
    </header>
    <main>
      <div class="goodimg">
        <img :src="goodinfo.imgurl" alt />
      </div>
      <div class="goodinfo">
        <h2 class="title">{{goodinfo.title}}</h2>
        <p class="price">{{goodinfo.price}}</p>
      </div>
      <div class="freight">
        <p>Banana承担运费</p>
        <ul>
          <li>正品保证</li>
          <li>质量保证</li>
          <li>隐私保证</li>
          <li>权威鉴定</li>
        </ul>

        <p>*17点前下单，预计72小时送达。</p>
      </div>

      <div class="gooddes">
        <p>{{goodinfo.title}}</p>
        <img :src="goodinfo.imgurl" alt />
      </div>

      <div class="addcar">
        <ul>
          <li>
            <a class="add" @click="addtoCart">加入购物车</a>
          </li>
          <li>
            <a class="buy" @click="gtcat">立即购买</a>
          </li>
        </ul>
      </div>
    </main>
  </div>
</template>

<script>
import Qs from "qs";
import { MessageBox } from "mint-ui";
export default {
  name: "Details",
  data: function() {
    return {
      goodinfo: {},
      oidnum: "",
      uid: null
    };
  },
  async created() {
    let nowuname = JSON.parse(localStorage.getItem("authorization"));
    // window.console.log(nowuname);
    let { username } = nowuname;
    // window.console.log(username);
    let nowuid = await this.$axios.get(
      "http://119.23.142.232:11291/usersnew/getuid",
      {
        params: { name: username }
      }
    );
    this.uid = nowuid.data.data[0].uid;
    // 订单列表;
    let {
      data: { data }
    } = await this.$axios.get("http://119.23.142.232:11291/cart", {
      params: { uid: this.uid }
    });

    data.forEach(item => {
      item.issel = Boolean(parseInt(item.issel));
      // window.console.log(item.issel);
    });
    // window.console.log(data);
    this.$store.state.cart.cartlist = data;

    // 获取列表页传来的商品ID
    let { gid } = this.$route.query;
    this.getGoodinfo(gid);
    this.getlength();
  },
  methods: {
    // 获取商品信息
    async getGoodinfo(gid) {
      let {
        data: { data }
      } = await this.$axios.get("http://119.23.142.232:11291/goodsnew", {
        params: {
          gid: gid
        }
      });
      // window.console.log(data);
      this.goodinfo = data[0];
      // window.console.log(this.goodinfo);
    },
    // 返回
    gb() {
      this.$router.back();
    },
    // 立刻购买
    gtcat() {
      this.addtoCart();
      this.$router.push({ name: "cart" });
    },
    // 查询购物车列表长度
    async getlength() {
      let {
        data: { data }
      } = await this.$axios.get("http://119.23.142.232:11291/cart");
      // window.console.log(data.length);
      this.oidnum = data.length;
    },
    // 添加到购物车
    async addtoCart() {
      // addtoCart() {
      let mycartinfo = this.$store.state.cart.cartlist;
      let { gid, imgurl, price } = this.goodinfo;
      let current = mycartinfo.filter(item => item.gid === gid)[0];
      // 如果有，加数量
      if (current) {
        current.qty = current.qty - 0 + 1;
        let datastr = Qs.stringify({
          qty: current.qty
        });
        // window.console.log(current.qty);
        let url = `http://119.23.142.232:11291/cart/${current.oid}`;
        let backinfo = await this.$axios.put(url, datastr, {
          headers: { "Content-Type": "application/x-www-form-urlencoded" }
        });
        let code = backinfo.data.code;
        if (code) {
          MessageBox("提示", "添加数量-1-");
        }
      } else {
        //如果没有添加到数据库和store
        // 添加到store
        let data = {
          oid: this.oidnum,
          gid: gid,
          gimgurl: imgurl,
          gprice: price,
          qty: 1,
          uid: this.uid,
          issel: false
        };
        this.$store.commit("addToCart", data);
        // 添加到数据库
        let datastr = Qs.stringify({
          oid: this.oidnum,
          gid: gid,
          gimgurl: imgurl,
          gprice: price,
          qty: 1,
          uid: this.uid,
          issel: 0
        });
        // window.console.log(datastr);
        let backinfo = await this.$axios.post(
          "http://119.23.142.232:11291/cart/addcart",
          datastr,
          {
            headers: { "Content-Type": "application/x-www-form-urlencoded" }
          }
        );
        // window.console.log(backinfo);
        let code = backinfo.data.code;
        if (code) {
          MessageBox("提示", "添加购物车成功！");
        }
      }
    }
  }
};
</script>

<style>
html,
body {
  height: 100%;
  width: 100%;
}

#details {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

#details a {
  text-decoration: none;
}

#details header {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: left;
  height: 1.04rem;
  line-height: 1.04rem;
  border-bottom: 0.026667rem solid #e5e5e5;
}

#details header .left {
  height: 1.04rem;
  line-height: 1.04rem;
  position: absolute;
  top: 0;
  left: 0;
  padding-left: 0.333333rem;
  width: 1.6rem;
  font-size: 0.48rem;
}

#details header i {
  font-size: 0.533333rem;
  font-weight: bold;
}

#details header h1 {
  width: 100%;
  font-size: 0.4rem;
  text-align: center;
  overflow: hidden;
  padding: 0 0.266667rem 0 2rem;
}

#details main {
  flex: 1;
  overflow-y: scroll;
  background: #f6f6f6;
  padding-bottom: 1.333333rem;
}

#details main img {
  width: 100%;
  height: 100%;
}

#details main .goodimg {
  margin-top: 0.293333rem;
  height: 10rem;
  border-bottom: 0.026667rem solid #e0e0e0;
}

#details main .goodinfo {
  padding: 0.266667rem 0 0.906667rem;
  border-bottom: 0.013333rem solid #efefef;
}

#details main .goodinfo .title {
  padding: 0.266667rem 0.533333rem;
  text-align: center;
  font-size: 0.4rem;
  line-height: 0.64rem;
  color: #333;
}

#details main .goodinfo .price {
  color: #333;
  font-size: 0.4rem;
  font-weight: bold;
  text-align: center;
}

#details main .freight {
  background: #fff;
  height: 3.186667rem;
  padding: 0 0.266667rem;
  border-top: 0.013333rem solid #e0e0e0;
  border-bottom: 0.013333rem solid #e0e0e0;
}

#details main .freight p:nth-of-type(1) {
  height: 1.04rem;
  line-height: 1.04rem;
  font-size: 0.373333rem;
  border-top: 0.013333rem solid #e0e0e0;
  border-bottom: 0.013333rem solid #efefef;
}

#details main .freight ul {
  height: 1.093333rem;
  line-height: 1.093333rem;
  display: flex;
  flex-direction: row;
  border-top: 0.013333rem solid #e0e0e0;
  border-bottom: 0.013333rem solid #efefef;
}

#details main .freight ul li {
  flex: 1;
  padding-left: 0.4rem;
  background: url(../images/d.png) no-repeat left center;
  background-size: 0.4rem;
  color: #666;
  font-size: 0.32rem;
}

#details main .freight p:nth-of-type(2) {
  height: 0.986667rem;
  line-height: 0.986667rem;
  font-size: 0.346667rem;
  border-top: 0.013333rem solid #e0e0e0;
  border-bottom: 0.013333rem solid #efefef;
  color: #666;
}

#details main .gooddes {
  margin-top: 0.4rem;
  background: #fff;
  padding: 0.266667rem 0;
}

#details main .addcar {
  width: 100%;
  background: #fff;
  height: 1.52rem;
  border-top: 0.026667rem solid #ddd;
  position: fixed;
  bottom: 1.333333rem;
}

#details main .addcar ul {
  display: flex;
  flex-direction: row;
}

#details main .addcar ul li {
  flex: 1;
  font-size: 0.4rem;
  text-align: center;
  line-height: 1.52rem;
}

#details main .addcar .add,
#details main .addcar .buy {
  border: 1px solid #4a4a4a;
  border-radius: 0.133333rem;
  padding: 0.266667rem 1.066667rem;
  color: #1d1d1d;
}

#details main .addcar .buy {
  background: #1d1d1d;
  color: #fff;
}
</style>